<button type="button" class="btn btn-warning show-btn" (click)="show()">
    <i class="fa fa-list-alt"></i> {{l("AuditLogs")}}</button>
<div bsModal #auditLogModal="bs-modal" class="modal fade text-left" tabindex="-1" role="dialog" aria-labelledby="auditLogModal"
    aria-hidden="true" [config]="{backdrop: 'static',keyboard:false}">
    <!-- <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-sm-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>{{l("AuditLogs")}}</span>
                </h3>
            </div>
        </div>
    </div> -->
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span>{{l("AuditLogs")}}</span>
                </h4>
                <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="m-content" *ngIf="isShow">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__body">

                        <div id="SettingsTabPanel" class="tabbable-line">

                            <ul class="nav nav-tabs  m-tabs-line" role="tablist">
                                <li class="nav-item m-tabs__item">
                                    <a href="#AuditLogsTab" class="nav-link m-tabs__link active" data-toggle="tab" role="tab">
                                        {{l("OperationLogs")}}
                                    </a>
                                </li>
                                <li class="nav-item m-tabs__item">
                                    <a href="#EntityChangesTab" class="nav-link m-tabs__link" data-toggle="tab" role="tab">
                                        {{l("ChangeLogs")}}
                                    </a>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="AuditLogsTab" role="tabpanel">

                                        <div class="row margin-bottom-10">
                                            <div class="col-sm-12 text-right">
                                                <button type="button" class="btn btn-success" (click)="exportToExcelAuditLogs()">
                                                    <i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}</button>
                                                <button type="button" class="btn btn-metal" (click)="getAuditLogs()">
                                                    <i class="fa fa-refresh"></i> {{l("Refresh")}}</button>
                                            </div>
                                        </div>

                                        <div class="m-form m-form--label-align-right">
                                            <form class="horizontal-form" #auditFilterForm="ngForm" (ngSubmit)="getAuditLogs()">
                                                <div class="row align-items-center m--margin-bottom-10">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="StartEndRange" class="control-label">{{l("DateRange")}}</label>
                                                            <!-- <date-range-picker id="StartEndRange" [(startDate)]="startDate" [(endDate)]="endDate"></date-range-picker> -->
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="UsernameAuditLog" class="control-label">{{l("UserName")}}</label>
                                                            <input id="UsernameAuditLog" type="text" name="UsernameAuditLog"
                                                                class="form-control" [(ngModel)]="usernameAuditLog">
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- <div *ngIf="advancedFiltersAreShown" class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="ServiceName" class="control-label">{{l("Service")}}</label>
                                                    <input id="ServiceName" name="ServiceName" type="text" class="form-control" [(ngModel)]="serviceName">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="control-label" style="display: block">{{l("Duration")}}</label>
                                                <div class="input-group" style="width: 250px !important;">
                                                    <input type="text" name="MinExecutionDuration" only-number="" class="form-control" min="0" max="86400000" ng-minlength="0" ng-maxlength="8" [(ngModel)]="minExecutionDuration">
                                                    <span class="input-group-addon">
                                                        ---
                                                    </span>
                                                    <input type="text" name="MaxExecutionDuration" only-number="" class="form-control" min="0" max="86400000" ng-minlength="0" ng-maxlength="8" [(ngModel)]="maxExecutionDuration">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="MethodName" class="control-label">{{l("Action")}}</label>
                                                    <input id="MethodName" type="text" name="MethodName" class="form-control" [(ngModel)]="methodName">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="HasException" class="control-label">{{l("ErrorState")}}</label>
                                                    <select id="HasException" name="HasException" class="form-control" [(ngModel)]="hasException">
                                                        <option value="">{{l("All")}}</option>
                                                        <option value="false">{{l("Success")}}</option>
                                                        <option value="true">{{l("HasError")}}</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="BrowserInfo" class="control-label">{{l("Browser")}}</label>
                                                    <input id="BrowserInfo" type="text" name="BrowserInfo" class="form-control" [(ngModel)]="browserInfo">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row m--margin-bottom-10">
                                            <div class="col-sm-6">
                                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
                                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
                                            </div>
                                        </div>
                                    -->
                                            </form>
                                        </div>
                                        <div class="row align-items-center">
                                            <!--<Primeng-TurboTable-Start>-->
                                            <div class="primeng-datatable-container" [busyIf]="primengTableHelperAuditLogs.isLoading">
                                                <p-table #dataTableAuditLogs [value]="primengTableHelperAuditLogs.records"
                                                    rows="{{primengTableHelperAuditLogs.defaultRecordsCountPerPage}}"
                                                    [paginator]="false" [lazy]="true" scrollable="true" ScrollWidth="100%"
                                                    responsive="primengTableHelperAuditLogs.isResponsive"
                                                    resizableColumns="primengTableHelperAuditLogs.resizableColumns">
                                                    <ng-template pTemplate="header">
                                                        <tr>
                                                            <th style="width:75px"></th>
                                                            <th style="width:75px"></th>
                                                            <th style="width: 150px" pSortableColumn="executionTime">
                                                                {{l('Time')}}
                                                                <p-sortIcon field="executionTime"></p-sortIcon>
                                                            </th>
                                                            <th style="width: 150px" pSortableColumn="userName">
                                                                {{l('UserName')}}
                                                                <p-sortIcon field="userName"></p-sortIcon>
                                                            </th>
                                                            <!-- <th style="width: 250px">
                                                        {{l('Service')}}
                                                    </th> -->
                                                            <th style="width: 250px">
                                                                {{l('Action')}}
                                                            </th>
                                                            <th style="width: 100px" pSortableColumn="executionDuration">
                                                                {{l('Duration')}}
                                                                <p-sortIcon field="executionDuration"></p-sortIcon>
                                                            </th>
                                                            <th style="width: 150px">
                                                                {{l('IpAddress')}}
                                                            </th>
                                                            <th style="width: 150px">
                                                                {{l('Client')}}
                                                            </th>
                                                            <th style="width: 150px">
                                                                {{l('Browser')}}
                                                            </th>
                                                        </tr>
                                                    </ng-template>
                                                    <ng-template pTemplate="body" let-record="$implicit">
                                                        <tr>
                                                            <td style="width: 75px">
                                                                <div class="text-center">
                                                                    <button class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"
                                                                        (click)="showAuditLogDetails(record)">
                                                                        <i class="la la-search" [attr.aria-label]="l('Search')"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                            <td style="width: 75px">
                                                                <div class="text-center">
                                                                    <i *ngIf="record.exception" class="fa fa-warning m--font-warning"></i>
                                                                    <i *ngIf="!record.exception" class="fa fa-check-circle m--font-success"></i>
                                                                </div>
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{ record.executionTime | momentFormat:'YYYY-MM-DD
                                                                HH:mm:ss'}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{record.userName}}
                                                            </td>
                                                            <!-- <td style="width: 250px">
                                                        {{record.serviceName}}
                                                    </td> -->
                                                            <td style="width: 250px">
                                                                {{getActionDisplay(record.methodName)}}
                                                            </td>
                                                            <td style="width: 100px">
                                                                {{l('Xms', record.executionDuration)}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{record.clientIpAddress}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{record.clientName}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                <span title="{{record.browserInfo}}">{{truncateStringWithPostfix(record.browserInfo,
                                                                    20)}}</span>
                                                            </td>
                                                        </tr>
                                                    </ng-template>
                                                </p-table>
                                                <div class="primeng-paging-container">
                                                    <p-paginator rows="{{primengTableHelperAuditLogs.defaultRecordsCountPerPage}}"
                                                        #paginatorAuditLogs (onPageChange)="getAuditLogs($event)"
                                                        [totalRecords]="primengTableHelperAuditLogs.totalRecordsCount"
                                                        [rowsPerPageOptions]="primengTableHelperAuditLogs.predefinedRecordsCountPerPage">
                                                    </p-paginator>
                                                    <span class="total-records-count">
                                                        {{l('TotalRecordsCount',
                                                        primengTableHelperAuditLogs.totalRecordsCount)}}
                                                    </span>
                                                </div>
                                            </div>
                                            <!--<Primeng-TurboTable-End>-->
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="EntityChangesTab" role="tabpanel">
                                        <div class="row margin-bottom-10">
                                            <div class="col-sm-12 text-right">
                                                <button type="button" class="btn btn-success" (click)="exportToExcelEntityChanges()">
                                                    <i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}</button>
                                                <button type="button" class="btn btn-metal" (click)="getEntityChanges()">
                                                    <i class="fa fa-refresh"></i> {{l("Refresh")}}</button>
                                            </div>
                                        </div>
                                        <div class="m-form m-form--label-align-right">
                                            <form class="horizontal-form" #entityChangeFilterForm="ngForm" (ngSubmit)="getEntityChanges()">
                                                <div class="row align-items-center m--margin-bottom-10">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="StartEndRange" class="control-label">{{l("DateRange")}}</label>
                                                            <input class="form-control" id="StartEndRange" name="StartEndRange"
                                                                #drp="bsDaterangepicker" bsDaterangepicker
                                                                dateRangePickerInitialValue [(ngModel)]="dateRange">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="UsernameAuditLog" class="control-label">{{l("UserName")}}</label>
                                                            <input id="UsernameAuditLog" type="text" name="UsernameAuditLog"
                                                                class="form-control" [(ngModel)]="usernameAuditLog">
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="row align-items-center">
                                            <!--<Primeng-TurboTable-Start>-->
                                            <div class="primeng-datatable-container" [busyIf]="primengTableHelperEntityChanges.isLoading">
                                                <p-table #dataTableEntityChanges [value]="primengTableHelperEntityChanges.records"
                                                    rows="{{primengTableHelperEntityChanges.defaultRecordsCountPerPage}}"
                                                    [paginator]="false" [lazy]="true" scrollable="true" ScrollWidth="100%"
                                                    responsive="primengTableHelperEntityChanges.isResponsive"
                                                    resizableColumns="primengTableHelperEntityChanges.resizableColumns">
                                                    <ng-template pTemplate="header">
                                                        <tr>
                                                            <th style="width: 40px">

                                                            </th>
                                                            <th style="width: 150px">
                                                                {{l('Action')}}
                                                            </th>
                                                            <th style="width: 250px">
                                                                {{l('Object')}}
                                                            </th>
                                                            <th style="width: 150px" pSortableColumn="userName">
                                                                {{l('UserName')}}
                                                                <p-sortIcon field="userName"></p-sortIcon>
                                                            </th>
                                                            <th style="width: 150px" pSortableColumn="changeTime">
                                                                {{l('Time')}}
                                                                <p-sortIcon field="changeTime"></p-sortIcon>
                                                            </th>
                                                        </tr>
                                                    </ng-template>
                                                    <ng-template pTemplate="body" let-record="$implicit">
                                                        <tr>
                                                            <td style="width: 40px">
                                                                <div class="text-center">
                                                                    <button class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"
                                                                        (click)="showEntityChangeDetails(record)">
                                                                        <i class="la la-search" [attr.aria-label]="l('Search')"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                            <td style="width: 150px">
                                                                <span title="{{record.changeTypeName}}">{{l(record.changeTypeName)}}</span>
                                                            </td>
                                                            <td style="width: 250px">
                                                                {{record.entityTypeFullName}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{record.userName}}
                                                            </td>
                                                            <td style="width: 150px">
                                                                {{ record.changeTime | momentFormat:'YYYY-MM-DD
                                                                HH:mm:ss'}}
                                                            </td>
                                                        </tr>
                                                    </ng-template>
                                                </p-table>
                                                <div class="primeng-paging-container">
                                                    <p-paginator rows="{{primengTableHelperEntityChanges.defaultRecordsCountPerPage}}"
                                                        #paginatorEntityChanges (onPageChange)="getEntityChanges($event)"
                                                        [totalRecords]="primengTableHelperEntityChanges.totalRecordsCount"
                                                        [rowsPerPageOptions]="primengTableHelperEntityChanges.predefinedRecordsCountPerPage">
                                                    </p-paginator>
                                                    <span class="total-records-count">
                                                        {{l('TotalRecordsCount',
                                                        primengTableHelperEntityChanges.totalRecordsCount)}}
                                                    </span>
                                                </div>
                                            </div>
                                            <!--<Primeng-TurboTable-End>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <auditLogDetailModal #auditLogDetailModal></auditLogDetailModal>
    <entityChangeDetailModal #entityChangeDetailModal></entityChangeDetailModal>
</div>